<template>
	<div class="app-container">
		<div class="bgWhite radius8 p25">
			<div>
				<span class="fb fs18 mr20">订单编号：{{form.orderNumber}}</span>
				<span class="fs14">业务经理：</span><span class="color2 fs14">{{form.businessManager}}</span>
			</div>
			<div class="flex colo-top row-between">
				<el-form class="p20" @submit.native.prevent :model="form" ref="queryRef" :rules="rules" :inline="true"
					label-width="110px">
					<el-form-item label="客户姓名：" prop="customerName">
						<div style="width: 248px">{{form.customerName}}</div>
					</el-form-item>
					<el-form-item label="客户手机号：" prop="cropCode">
						<div style="width: 248px">{{form.customerPhone}}</div>
					</el-form-item>
					<el-form-item label="客户类型：" prop="customerType">
						<div style="width: 248px">
							<dict-tag :options="bus_customer_type" :value="form.customerType" style="width: 248px" />
						</div>
					</el-form-item>
					<el-form-item label="收货人：" prop="recipient">
						<div style="width: 248px">{{form.recipient}}</div>
					</el-form-item>
					<el-form-item label="收货人手机号：" prop="recipientPhone">
						<div style="width: 248px">{{form.recipientPhone}}</div>
					</el-form-item>
					<el-form-item label="收货地址：" prop="shippingAddress">
						<div style="width: 248px;line-height: 18px;">{{form.shippingAddress}}</div>
					</el-form-item>
				</el-form>
				<div class="flex col-top mt30" style="white-space: nowrap;">
					<div class="mr20">
						<div class="fs14 color2">订单状态</div>
						<div class="mt20 fs20 flex col-center">
							<div :class="activeStatus(form.orderStatus)"><span class="drop"></span></div>
							<dict-tag :options="bus_order_status" :value="form.orderStatus" />
						</div>
					</div>
					<div>
						<div class="fs14 color2">订单金额</div>
						<div class="fs20" style="margin-top: 23px;">¥{{form.orderTotalAmount}}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="bgWhite radius8 mt30">
			<div class="fb border-bottom plr30 pt20 pb20">
				流程进度
			</div>
			<div class="pt30 pb30">
				<progressGroup :array="progressLine"></progressGroup>
			</div>
		</div> -->
		<div class="bgWhite radius8 mt30">
			<div class="fb border-bottom plr30 pt20 pb20">
				订单详情
			</div>
			<div class=" plr30 ">
				<div class="fb pt20 pb20">
					基本信息
				</div>
				<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
					<el-table-column label="订单来源" align="center" prop="orderSource">
						<template v-slot="scope">
							<dict-tag :options="bus_source" :value="form.orderSource" />
						</template>
					</el-table-column>
					<el-table-column label="付款类型" align="center" prop="paymentType">
						<template v-slot="scope">
							<dict-tag :options="bus_pay_type" :value="form.paymentType" />
						</template>
					</el-table-column>
					<el-table-column label="支付方式" align="center" prop="paymentMethod">
						<template v-slot="scope">
							<dict-tag :options="bus_pay_status" :value="form.paymentMethod" />
						</template>
					</el-table-column>
					<el-table-column label="配送方式" align="center" prop="logisticsId">
						<template v-slot="scope">
							<span>{{form.logistics}}</span>
							<!-- <dict-tag :options="bus_logistics_type" :value="form.logisticsId" /> -->
						</template>
					</el-table-column>
					<el-table-column label="物流信息" align="center" prop="paymentMethod">
						<template v-slot="scope">
							<span class="main-color cursor" @click="logistics(form.yyLogisticsInformation)">查看物流</span>
						</template>
					</el-table-column>
				</el-table>
				<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
					<el-table-column label="订单金额" align="center" prop="id">
						<template v-slot="scope">
							￥{{form.orderTotalAmount}}
						</template>
					</el-table-column>
					<el-table-column label="差额" align="center" prop="differenceAmount">
						<template v-slot="scope">
							￥{{form.differenceAmount}}
						</template>
					</el-table-column>
					<el-table-column label="回款金额" align="center" prop="receivedAmount">
						<template v-slot="scope">
							￥{{form.receivedAmount}}
						</template>
					</el-table-column>
					<el-table-column label="未付款金额" align="center" prop="weifukuan">
						<template v-slot="scope">
							￥{{form.weifukuan}}
						</template>
					</el-table-column>
					<el-table-column label="已付款金额" align="center" prop="yifukuan">
						<template v-slot="scope">
							￥{{form.yifukuan}}
						</template>
					</el-table-column>
				</el-table>
				<div class="mt30">
					<el-table v-loading="loading" :data="form.commodityList" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }"
						  height="350px"
						  >
						<el-table-column label="商品图片" align="center" prop="mainImageUrl">
							<template v-slot="scope">
								<div class="relative" style="width: 90px;margin: 0 auto;">
									<img :src="scope.row.mainImageUrl ? scope.row.mainImageUrl : defaultImg" alt="" class="radius8" width="90" height="90" />
									<img v-if="scope.row.type == 1" class="gift" src="/src/assets/images/gift.png" alt="" />
								</div>
							</template>
						</el-table-column>
						<el-table-column label="商品名称" align="center" prop="commodityName">
							<template v-slot="scope">
								{{scope.row.commodityName}}
							</template>
						</el-table-column>
						<el-table-column label="价格" align="center" prop="unitPrice">
							<template v-slot="scope">
								{{scope.row.unitPrice}}
							</template>
						</el-table-column>
						<el-table-column label="商品编号" align="center" prop="commodityCode" />
						<el-table-column align="center" prop="specificationId" label="商品规格">
							<template v-slot="scope">
								<dict-tag :options="bus_product_specification_unit"
									:value="scope.row.specificationId" />
							</template>
						</el-table-column>
						<el-table-column label="数量" align="center" prop="paymentMethod">
							<template v-slot="scope">
								{{scope.row.quantity}}
							</template>
						</el-table-column>
						<el-table-column label="箱数量" align="center" prop="numberOfShippingBoxes">
							<template v-slot="scope">
								{{scope.row.numberOfShippingBoxes}}
							</template>
						</el-table-column>
						<el-table-column label="小计" align="center" prop="paymentMethod">
							<template v-slot="scope">
								{{scope.row.subtotal}}
							</template>
						</el-table-column>
						<!-- <el-table-column fixed="right" label="操作" align="center" width="100">
							<template v-slot="scope">
								<el-button size="mini" type="text" @click="logistics(scope.row.yyLogisticsInformation)">
									查看物流
								</el-button>
							</template>
						</el-table-column> -->
					</el-table>
				</div>
				<div class="mt20 pb10">
					<el-form-item label="发货备注：" prop="remark" label-width="110">
						<el-input size="large" disabled type="textarea" v-model="form.deliverGoodsRemark" resize="none" class="textReset" :rows="2"
							placeholder="请输入" />
					</el-form-item>
					<el-form-item label="收款备注：" prop="remark" label-width="110">
						<el-input size="large" disabled v-model="form.remark" type="textarea" resize="none" class="textReset" :rows="2"
							placeholder="请输入" />
					</el-form-item>
				</div>
			</div>
			<!-- 未提交(草稿)显示 -->
			<!-- <div class="text-center mt25 pb30" v-if="form.orderStatus == '1001'">
				<el-button type="defaultBtn" style="height: 38px;" @click="handleEdit()">编辑订单</el-button>
				<el-button style="width: 88px;height: 38px;" @click="handleSubmit()">提交审核</el-button>
			</div> -->
			<!-- 1010 已发货/全部订单查看 -->
			<div class="" v-if="type == 1 || form.orderStatus == '1010'">
				<div class=" plr30 fb pt20 pb20 border-bottom">
					回款信息
				</div>
				<div class="mt10 p20">
					<el-table v-loading="loading" :data="list1" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<el-table-column label="回款日期" align="center" prop="paymentDate" />
						<el-table-column label="回款单号" align="center" prop="id" />
						<el-table-column label="回款金额" align="center" prop="paymentAmount" />
						<el-table-column label="付款方式" align="center" prop="orderStatus">
							<template v-slot="scope">
								<dict-tag :options="bus_pay_status" :value="scope.row.paymentMethod" />
							</template>
						</el-table-column>
						<el-table-column label="付款截图" align="center" prop="orderStatus">
							<template v-slot="scope">
								<img width="80" height="80" class="radius8" :src="scope.row.paymentScreenshot" alt="" />
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" align="center" width="300">
							<template v-slot="scope">
								<el-button size="mini" type="text" @click="handleReceivedDetail(scope.row)">
									查看详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="total1 > 0" :total="total1" v-model:page="queryParams1.pageNum"
						v-model:limit="queryParams1.pageSize" @pagination="getList" />
				</div>
			</div>
			<!-- <div class="" v-if="type == 1 || form.orderStatus == '1010'">
				<div class=" plr30 fb pt20 pb20 border-bottom">
					发货信息
				</div>
				<div class="mt10 p20">
					<el-table v-loading="loading" :data="goodsList" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<el-table-column label="发货日期" align="center" prop="id">
							<template v-slot="scope">
								<span class="main-color cursor">线上</span>
							</template>
						</el-table-column>
						<el-table-column label="发货单号" align="center" prop="customerName">
							<template v-slot="scope">
								11
							</template>
						</el-table-column>
						<el-table-column label="发货类型" align="center" prop="orderStatus">
							<template v-slot="scope">
								111
								<dict-tag :options="bus_order_status" :value="scope.row.orderStatus" />
							</template>
						</el-table-column>
						<el-table-column label="发货人" align="center" prop="orderStatus">
							<template v-slot="scope">
								111
								<dict-tag :options="bus_order_status" :value="scope.row.orderStatus" />
							</template>
						</el-table-column>
						<el-table-column label="发货类型" align="center" prop="orderStatus">
							<template v-slot="scope">
								111
								<dict-tag :options="bus_order_status" :value="scope.row.orderStatus" />
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" align="center" width="300">
							<template v-slot="scope">
								<el-button size="mini" type="text" @click="handleUpdate(scope.row)">
									查看详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div> -->
			<!-- <div class="">
				<div class=" plr30 fb pt20 pb20 border-bottom">
					操作记录
				</div>
				<div class="mt10 p20">
					<el-table v-loading="loading" :data="logList" style="width: 100%" :header-row-style="{
							background: '#FAFAFA',
							color: '#0C1019',
							height: '54px',
						  }" :cell-style="{ height: '54px' }">
						<el-table-column label="时间" align="center" prop="time"/>
						<el-table-column label="节点" align="center" prop="customerName">
							<template v-slot="scope">
								{{scope.row.node}}
							</template>
						</el-table-column>
						<el-table-column label="操作人" align="center" prop="orderStatus">
							<template v-slot="scope">
								{{scope.row.operator}}
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" prop="operationContent" />
						<el-table-column label="操作结果" align="center" prop="operationResult"/>
					</el-table>
					<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
						v-model:limit="queryParams.pageSize" @pagination="getList" />
					结束订单按钮
					<div class="text-center pt30 pb30" v-if="type == 1">
						<el-button type="operate" 
						style="width: 88px;height: 38px;color: #FF001C;background-color:#fff;border-color: #FF001C;"
						 @click="handleError()">结束订单</el-button>
					</div>	
				</div>
			</div> -->
		</div>
		<!-- 查看物流弹窗 -->
		<logist ref="expressDialog"></logist>
		<returnMoney></returnMoney>
		<!-- 结束订单绝弹窗 -->
		<errorPop ref="error" :item="propItem" :type="0" :id="form.id" @refresh="getDetail"></errorPop>
	</div>
</template>

<script>
	import {
		orderDetail, //详情
		orderNumberDetail,//根据订单号查详情
		approvalLog,//操作日志
		orderAdd,//提交订单
	} from "@/api/business/order";
	import returnMoney from './components/returnMoney.vue' //回款信息弹窗
	import {
		receivedList, //回款列表
	} from "@/api/business/received";
	import progressGroup from '@/components/Progress/index.vue'//进度条
	import errorPop from './components/error.vue'//审核拒绝弹窗
	import logist from './components/logist.vue' //查看物流
	export default {
		components: {
			returnMoney,
			progressGroup,
			errorPop,
			logist
		},
		data() {
			return {
				progressLine:[],//进度条
				bus_customer_type:this.useDict('bus_customer_type').bus_customer_type,//客户类型
				bus_order_status: this.useDict('bus_order_status').bus_order_status, //订单状态
				bus_source: this.useDict('bus_source').bus_source, //订单来源
				bus_pay_type: this.useDict('bus_pay_type').bus_pay_type, //付款类型
				bus_pay_status: this.useDict('bus_pay_status').bus_pay_status, //付款方式	
				// bus_logistics_type: this.useDict('bus_logistics_type').bus_logistics_type,
				bus_product_specification_unit: this.useDict('bus_product_specification_unit')
					.bus_product_specification_unit, //规格	
				list: [{}],
				loading: false,
				form: {
					id: ''
				},
				loading: true, // 遮罩层
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNumber: '',
				},//操作日志
				total: 0,//操作日志
				logList: [],//操作日志
				type: 0, //0:我的订单-查看详情 1：全部订单-查看详情
				queryParams1: {
					pageNum: 1,
					pageSize: 5,
					relatedOrder: '',
				}, //回款列表
				list1: [] ,//回款列表
				total1:0,//回款列表
				propItem:'',
				goodsList:[],//发货信息
			}
		},
		created() {
			this.type = this.$route.query.type ? this.$route.query.type : 0
			this.form.orderNumber = this.$route.query.orderNumber ? this.$route.query.orderNumber : ''
			this.getDetail()
		},
		methods: {
			// 查看物流
			logistics(row){
				this.$refs.expressDialog.open(row)	
			},
			//结束订单
			handleError(){
				this.$refs.error.open()
			},
			getDetail() {
				orderNumberDetail(this.form.orderNumber).then(res => {
					this.form = res.data			
					//判断有无赠品
					if(this.form.hasGift == '0'){
						//无赠品 提交审核===财务审批 ===工厂发货
						this.progressLine = [
							{
								id:1,
								name:'提交订单',						
							},
							{
								id:2,
								name:'业务审批',
								orderStatus:'1003'
							},
							{
								id:3,
								name:'财务审批',
								orderStatus:'1005'
							},
							{
								id:4,
								name:'工厂发货',
								orderStatus:'1009'
							}
						]
					}else if(this.form.hasGift == '1' && this.form.orderGrossProfitRate*1 >= 0.3){
						//有赠品&&毛利率大于等于30%
						this.progressLine = [
							{
								id:1,
								name:'提交订单',						
							},
							{
								id:2,
								name:'业务审批',
								orderStatus:'1003'
							},
							{
								id:3,
								name:'主管审批',
								orderStatus:'1004'
							},
							{
								id:4,
								name:'财务审批',
								orderStatus:'1005'
							},
							{
								id:5,
								name:'工厂发货',
								orderStatus:'1009'
							}
						]
					}else if(this.form.hasGift == '1' && this.form.orderGrossProfitRate*1 < 0.3){
						//有赠品&&毛利率小于30%
						this.progressLine = [
							{
								id:1,
								name:'提交订单',						
							},
							{
								id:2,
								name:'业务审批',
								orderStatus:'1003'
							},
							{
								id:3,
								name:'主管审批',
								orderStatus:'1004'
							},
							{
								id:4,
								name:'领导审批',
							},
							{
								id:5,
								name:'财务审批',
								orderStatus:'1005'
							},
							{
								id:6,
								name:'工厂发货',
								orderStatus:'1009'
							}
						]
					}
					this.progressLine[0].time = this.form.createTime
					for(let key in this.progressLine){
						if(this.form.orderStatus  == this.progressLine[key].orderStatus){
							for (let i = 0; i < key; i++) {
								this.progressLine[i].status = true
							}
						}
					}
					
					this.getList()
				})
			},
			//操作日志
			getList() {
				this.queryParams.orderNumber = this.form.orderNumber
				approvalLog(this.queryParams).then(res => {
					this.logList = res.rows
					this.total = res.total
					this.loading = false
					this.getReceivedList()
				})
			},
			//回款列表
			getReceivedList() {
				this.queryParams1.relatedOrder = this.form.orderNumber
				receivedList(this.queryParams1).then((response) => {
					this.list1 = response.rows;
					this.total1 = response.total
				})
			},
			//回款详情
			handleReceivedDetail(row){
				this.$router.push('/payment/receivedDetail?id='+row.id)
			},
			//编辑
			handleEdit() {
				this.$router.push('/order/orderAdd?id=' + this.form.id)
			},
			//提交审核
			handleSubmit(){
				orderAdd(this.form).then(res => {
					if (res.code == 200) {
						this.removeLocal()
						this.$modal.msgSuccess('提交成功')
						setTimeout(() => {
							this.closePage()
						}, 1500)
					}
				})
			}
		}
	}
</script>
<style>
	.gift{
		position: absolute;
		width: 32px;
		left: 0
	}
</style>
